<template>
    <div>
        <h1 v-report-view="{type:'blog'}">测试自定义指令</h1>
        <d-panel>
            <d-panel-header>上传</d-panel-header>
            <d-upload v-model="uploadedFiles" :upload-options="uploadOptions" droppable />
        </d-panel>
        <d-panel>
            <d-panel-header>button</d-panel-header>
            <d-button variant="solid" @click="handleLoading" :loading="btnLoading">click loading</d-button>
            <d-button>Outline Button</d-button>
            <d-button variant="text">
            Text Button
            </d-button>
        </d-panel>
        <d-panel>
            <d-panel-header>input</d-panel-header>
            <d-input @input="handleInputChange" @blur="handleInputBlur" placeholder="请输入"></d-input>
        </d-panel>
        <d-panel>
            <d-panel-header>tooltip</d-panel-header>
            <d-tooltip position="left" content="I am a HTML Element!">
            <d-button>left</d-button>
            </d-tooltip>
            <d-tooltip :mouse-leave-delay="100000" content="I am a HTML Element!">
            <d-button>top</d-button>
            </d-tooltip>
            <d-tooltip position="bottom" content="I am a HTML Element!">
            <d-button>bottom</d-button>
            </d-tooltip>
            <d-tooltip position="right" content="I am a HTML Element!">
            <d-button>right</d-button>
            </d-tooltip>
        </d-panel>
        <d-panel>
            <d-panel-header>form</d-panel-header>
            <d-form ref="formRef" layout="vertical" :data="formData" :rules="rules" :pop-position="['right']">
                <d-form-item
                field="username"
                :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
                :show-feedback="false"
                label="用户名"
                >
                <d-input v-model="formData.username" />
                </d-form-item>
                <d-form-item field="userInfo" label="用户信息">
                <d-textarea v-model="formData.userInfo"></d-textarea>
                </d-form-item>
                <d-form-item field="age" label="年龄">
                <d-input v-model="formData.age" />
                </d-form-item>
                <d-form-item field="select" label="Select">
                <d-select v-model="formData.select" :options="selectOptions" allow-clear />
                </d-form-item>
                <d-form-item field="autoComplete" label="AutoComplete">
                <d-auto-complete :source="source" v-model="formData.autoComplete"></d-auto-complete>
                </d-form-item>
                <d-form-item field="radio" label="Radio">
                <d-radio-group direction="row" v-model="formData.radio">
                    <d-radio value="0">Manual execution</d-radio>
                    <d-radio value="1">Daily execution</d-radio>
                    <d-radio value="2">Weekly execution</d-radio>
                </d-radio-group>
                </d-form-item>
                <d-form-item field="executionDay" label="Execution day">
                <CheckboxGroup v-model="formData.executionDay" label="Execution day" direction="row">
                    <d-checkbox label="Mon" value="Mon" />
                    <d-checkbox label="Tue" value="Tue" />
                    <d-checkbox label="Wed" value="Wed" />
                    <d-checkbox label="Thur" value="Thur" />
                    <d-checkbox label="Fri" value="Fri" />
                    <d-checkbox label="Sat" value="Sat" />
                    <d-checkbox label="Sun" value="Sun" />
                </CheckboxGroup>
                </d-form-item>
                <FormOperation class="form-operation-wrap">
                    <d-button variant="solid" @click="onClick">提交</d-button>
                    <d-button @click="onClear">清除校验结果</d-button>
                    <d-button @click="onReset">重置</d-button>
                </FormOperation>
            </d-form>
        </d-panel>
        <d-panel>
            <d-panel-header>markdown</d-panel-header>
            <MdRender :content="content" :md-rules="mdRules" base-url="https://test-base-url"></MdRender>
        </d-panel>
    </div>
</template>

<script setup>
import { defineComponent, reactive, ref, watch } from 'vue';
import { MdRender } from 'vue-devui/editor-md';
import { CheckboxGroup } from 'vue-devui/checkbox';

/**
 * 上传
 */
const uploadedFiles = ref([]);
const uploadOptions = ref({
  uri: 'https://run.mocky.io/v3/132b3ea3-23ea-436b-aed4-c43ef9d116f0',
});

/**
 * 表单
 */
const handleInputChange = (val) => {
  console.log('handleInputChange--', val);
}
const handleInputBlur = (val) => {
  console.log('handleInputBlur--', val);
}

const btnLoading = ref(false);
const handleLoading = () => {
    btnLoading.value = !btnLoading.value;
}

const formRef = ref(null);
const formData = reactive({
  username: '',
  userInfo: '',
  age: '',
  select: 'Options2',
  autoComplete: '',
  executionDay: ['Tue'],
  radio: '',
  datePickerPro: '',
  rangeDatePickerPro: ['', ''],
});
const selectOptions = reactive(['Options1', 'Options2', 'Options3']);
const source = ref(['C#', 'C', 'C++']);
const checkAge = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('年龄不能为空'));
  }
  setTimeout(() => {
    if (value < 18) {
      return callback(new Error('年龄不能小于18'));
    } else {
      callback();
    }
  }, 1000);
};

const checkRangeDatePickerPro = (rule, value, callback) => {
  if (!value || (!value[0] && !value[1])) {
    return callback(new Error('请选择日期范围'));
  } else if (!value[0]) {
    return callback(new Error('请选择开始日期'));
  } else if (!value[1]) {
    return callback(new Error('请选择结束日期'));
  } else {
    return callback();
  }
};

const rules = {
  username: [{ min: 3, max: 6, message: '用户名需不小于3个字符，不大于6个字符', trigger: 'change' }],
  userInfo: [{ required: true, message: '用户信息不能为空', trigger: 'blur' }],
  age: [{ validator: checkAge }],
  select: [{ required: true, message: '请选择', trigger: 'change' }],
  autoComplete: [{ required: true, message: '请选择', trigger: 'change' }],
  executionDay: [{ type: 'array', required: true, message: '请至少选择一个执行时间', trigger: 'change' }],
  radio: [{ required: true, message: '请选择', trigger: 'change' }],
  datePickerPro: [{ type: 'object', required: true, message: '请选择日期', trigger: 'change' }],
  rangeDatePickerPro: [
    { validator: checkRangeDatePickerPro },
    { type: 'array', required: true, message: '请选择日期范围', trigger: 'change' },
  ],
};

const onClick = () => {
  formRef.value.validate((isValid, invalidFields) => {
    console.log(isValid);
    console.log(invalidFields);
  });
};

const onClear = () => {
  formRef.value.clearValidate();
};

const onReset = () => {
  formRef.value.resetFields();
};

/**
 * markdown
 */
const content = ref(`# nuxt-demo

readme.md

## test svg
- this is a svg
## end`);
</script>

<style>
.form-operation-wrap > * {
  margin-right: 8px;
}
</style>